<template>
  <b-collapse-wrap :title="title" collapse>
    <div class="p16">
      <h3>演示如何控制打印样式(STYLE)</h3>

      <div class="p8" />
      <div>
        <b-row gutter="16">
          <b-col span="14">
            <p>在对页面内容直接裁剪输出时，有时候显示样式不一定</p>
            <p>适合打印，LODOP可以实现按需要控制打印样式。</p>
            <p>下面的表格由页面样式(STYLE)控制加了蓝色粗边框：</p>
            <div class="p8" />
            <div ref="form1Ref">
              <table border="1" width="300">
                <tr>
                  <td width="50%">101</td>
                  <td width="50%" class="hiddentd">201</td>
                </tr>
                <tr>
                  <td width="50%">102</td>
                  <td width="50%" class="hiddentd">202</td>
                </tr>
                <tr>
                  <td width="50%">103</td>
                  <td width="50%" class="hiddentd">203</td>
                </tr>
                <tr>
                  <td width="50%">104</td>
                  <td width="50%" class="hiddentd">204</td>
                </tr>
              </table>
            </div>
          </b-col>
          <b-col span="10">
            <p class="mb-8">
              1、输出时可与显示样式一致：
              <b-button type="text" @click="myPreview1">预览同样式打印1</b-button>
            </p>
            <p class="mb-8">
              2、可以无样式(缺省表格线)输出：
              <b-button type="text" @click="myPreview2">预览无样式打印2</b-button>
            </p>
            <p class="mb-8">
              3、用另外样式(表格线合并为单一细线)输出：
              <b-button type="text" @click="myPreview3">预览细线样式打印3</b-button>
            </p>
            <p class="mb-8">
              4、打印本页并隐藏一些内容
              <b-button type="text" @click="myPreview4">打印预览4(隐藏本按钮和表格第2列)</b-button>
              ，后面内容紧跟上。
            </p>
            <p class="mb-8">
              5、用外链样式表控制样式：
              <b-button type="text" @click="myPreview5">预览双线边框的打印5</b-button>
            </p>
          </b-col>
        </b-row>
      </div>
      <div class="p8" />

      <!-- <h3 class="p8">
        演示如何打印 b-table 样式
        <b-button type="primary" @click="printTable">打印</b-button>
      </h3>

      <div ref="customRef">
        <b-table :columns="columns" :data="data"></b-table>
      </div> -->
    </div>
  </b-collapse-wrap>
</template>

<script setup>
import { ref } from 'vue'
import { getLodop } from '@/plugins/lodop/LodopFuncs'
import { id } from 'brace/worker/json'

const form1Ref = ref()
const customRef = ref()

const columns = [
  { title: '姓名', key: 'name' },
  { title: '年龄', key: 'age' },
  // { title: '出生日期', key: 'birthday' },
  // { title: '地址', key: 'address' },
]
const data = ref([
  {
    name: '王小明',
    age: 18,
    birthday: '1990-04-22',
    address: '北京市朝阳区芍药居',
  },
  {
    name: '张小刚',
    age: 25,
    birthday: '1990-11-11',
    address: '北京市海淀区西二旗',
  },
  {
    name: '李小红',
    age: 30,
    birthday: '1985-02-05',
    address: '上海市浦东新区世纪大道',
  },
  {
    name: '周小伟',
    age: 26,
    birthday: '1993-07-11',
    address: '深圳市南山区深南大道',
  },
  {
    name: '张小发',
    age: 33,
    birthday: '1999-12-12',
    address: '南京市龙眠大道',
  },
])
function getdata(index, id) {
  return data.value[index][id]
}

defineProps({
  title: {
    type: String,
    default: '',
  },
})
let LODOP

const styleText = ref(`table {
  border-width: 5px;
  border-style: solid;
  border-color: #0000ff;
}
td {
  border-width: 1px;
  border-style: solid;
}`)

function myPreview1() {
  LODOP = getLodop()
  let strBodyStyle = '<style>' + styleText.value + '</style>'
  let strFormHtml = strBodyStyle + '<body>' + form1Ref.value.innerHTML + '</body>'
  LODOP.PRINT_INIT('打印控件功能演示_Lodop功能_样式风格')
  LODOP.ADD_PRINT_TEXT(50, 50, 260, 39, '打印与显示样式一致：')
  LODOP.ADD_PRINT_HTM(88, 50, 300, 200, strFormHtml)
  LODOP.SET_PREVIEW_WINDOW(0, 0, 0, 1000, 1200, '') // 演示设置各种样式的打印预览窗口：
  LODOP.PREVIEW()
}

function myPreview2() {
  LODOP = getLodop()
  let strFormHtml = form1Ref.value.innerHTML
  LODOP.PRINT_INIT('打印控件功能演示_Lodop功能_样式风格')
  LODOP.ADD_PRINT_TEXT(50, 50, 260, 39, '无样式打印：')
  LODOP.ADD_PRINT_HTM(88, 50, 300, 200, strFormHtml)
  LODOP.SET_PREVIEW_WINDOW(0, 0, 0, 1000, 1200, '') // 演示设置各种样式的打印预览窗口：
  LODOP.PREVIEW()
}

function myPreview3() {
  LODOP = getLodop()
  let strBodyStyle = '<style>table,td { border: 1 solid #000000;border-collapse:collapse }</style>'
  let strFormHtml = strBodyStyle + '<body>' + form1Ref.value.innerHTML + '</body>'
  LODOP.PRINT_INIT('打印控件功能演示_Lodop功能_样式风格')
  LODOP.ADD_PRINT_TEXT(50, 50, 260, 39, '细线样式打印：')
  LODOP.ADD_PRINT_HTM(88, 50, 300, 200, strFormHtml)
  LODOP.SET_PREVIEW_WINDOW(0, 0, 0, 1000, 1200, '') // 演示设置各种样式的打印预览窗口：
  LODOP.PREVIEW()
}

function myPreview4() {
  LODOP = getLodop()
  LODOP.PRINT_INIT('打印控件功能演示_Lodop功能_全页排除按钮')
  let strBodyStyle = '<style>input {display: none;}.hiddentd {display: none;}</style>'
  strBodyStyle = strBodyStyle + '<style>' + styleText.value + '</style>'
  let strBodyHtml = strBodyStyle + '<body>' + form1Ref.value.innerHTML + '</body>'
  LODOP.ADD_PRINT_HTM(20, 40, 700, 900, strBodyHtml)
  LODOP.SET_PREVIEW_WINDOW(0, 0, 0, 1000, 1200, '') // 演示设置各种样式的打印预览窗口：
  LODOP.PREVIEW()
}

function myPreview5() {
  LODOP = getLodop()
  let strStyleCSS = "<link href='/print-sample.css' type='text/css' rel='stylesheet'>"
  let strFormHtml = strStyleCSS + '<body>' + form1Ref.value.innerHTML + '</body>'
  // console.log('strFormHtml ========>', strFormHtml)
  LODOP.PRINT_INIT('打印控件功能演示_Lodop功能_外链样式风格')
  LODOP.ADD_PRINT_TEXT(50, 50, 260, 39, '外链样式红色边框：')
  LODOP.ADD_PRINT_HTM(88, 50, 300, 200, strFormHtml)
  LODOP.SET_PREVIEW_WINDOW(0, 0, 0, 1000, 1200, '') // 演示设置各种样式的打印预览窗口：
  LODOP.PREVIEW()
}

function printTable() {
  LODOP = getLodop()
  LODOP.PRINT_INIT('打印控件功能演示_Lodop功能_自定义组件')
  // let strStyleCSS = "<link href='/custom/index.css' type='text/css' rel='stylesheet'>"
  let strStyleCSS = ''
  let strFormHtml = strStyleCSS + '<body>' + customRef.value.innerHTML + '</body>'
  console.log('strFormHtml ========>', strFormHtml)
  LODOP.ADD_PRINT_TEXT(50, 50, 260, 39, '自定义表格样式')
  LODOP.ADD_PRINT_HTM(88, 50, 1000, 1200, strFormHtml)
  // LODOP.SET_PREVIEW_WINDOW(0, 0, 0, 1000, 1200, '') // 演示设置各种样式的打印预览窗口：
  LODOP.PREVIEW()
}
</script>

<style scoped>
table {
  border-width: 5px;
  border-style: solid;
  border-color: #0000ff;
}
td {
  border-width: 1px;
  border-style: solid;
}
</style>
